<template>
  <div class="header-container">
    <div class="l-content">
      <div class="icon-wrapper"></div>
      <h3 class="title">产品生产追溯管理系统</h3>
    </div>
    <el-collapse-transition>
      <div class="view" :style="{display: showAdditionalContent ? 'flex' : 'none', flexDirection: showAdditionalContent ? 'row' : 'column'}">
        <el-input
            class="model_input"
            placeholder="请输入机型代码"
            style="margin-left: 5px"
            v-model="modelInput">
        </el-input>
        <el-input
            class="device_input"
            placeholder="请输入设备唯一码"
            style="margin-left: 5px"
            v-model="deviceInput">
        </el-input>
        <el-input
            class="customer_input"
            placeholder="请输入客户名称"
            style="margin-left: 5px"
            v-model="clientInput">
        </el-input>
        <el-radio-group v-model="radioValue" style="display: inline-flex;margin-left: 10px;">
          <el-radio :label="1" style="margin-right: 10px;">入库</el-radio>
          <el-radio :label="2" style="margin-right: 10px;">出库</el-radio>
          <el-radio :label="3" style="margin-right: 10px;">退货</el-radio>
          <el-radio :label="4" style="margin-right: 10px;">维修</el-radio>
          <el-radio :label="5">返工</el-radio>
        </el-radio-group>
        <el-input
            class="date_input"
            placeholder="请输入日期"
            suffix-icon="el-icon-date"
            style="margin-left: 10px"
            v-model="dateInput">
        </el-input>
        <el-button type="primary" style="margin-left: 10px">查询</el-button>
      </div>
    </el-collapse-transition>
    <div class="r-content">
      <el-button icon="el-icon-search" circle @click="toggleAdditionalContent"></el-button>
      <el-button icon="el-icon-setting" circle></el-button>
      <el-dropdown @command="handleClick">
        <span class="el-dropdown-link">
          <img class="user" src="../assets/image/user.jpg" alt="">
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="user">用户管理</el-dropdown-item>
          <el-dropdown-item command="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
import ElCollapseTransition from 'element-ui/src/transitions/collapse-transition';
export default {
  data() {
    return {
      showAdditionalContent: false,
      radio: 1,
      model_input:'',
      device_input:'',
      customer_input:'',
      date_input:'',
    };
  },
  computed: {
    modelInput: {
      get() {
        return this.$store.state.model_Input;
      },
      set(value) {
        this.$store.commit('setModelInput', value);
      }
    },
    deviceInput: {
      get() {
        return this.$store.state.device_Input;
      },
      set(value) {
        this.$store.commit('setDeviceInput', value);
      }
    },
    clientInput: {
      get() {
        return this.$store.state.client_Input;
      },
      set(value) {
        this.$store.commit('setClientInput', value);
      }
    },
    dateInput: {
      get() {
        return this.$store.state.date_Input;
      },
      set(value) {
        this.$store.commit('setDateInput', value);
      }
    },
    radioValue: {
      get() {
        return this.$store.state.radioValue;
      },
      set(value) {
        this.$store.commit('setRadioValue', value);
      }
    }
  },
  methods: {
    toggleAdditionalContent() {
      this.showAdditionalContent = !this.showAdditionalContent;
    },
    handleClick(command){
      if(command === 'logout'){
        console.log('登出');
        let storage = window.localStorage;
        storage.clear();
        this.$router.push('/login');
        this.$message({
          message: '登出成功',
          type: 'success'
        });
      }
      else if(command === 'user') {
        console.log('用户管理');
        if (this.$route.path !== '/user') {
          this.$router.push('/user');
        } else {
          this.$message({
            message: '当前页面已处于用户管理页面!',
            type: 'warning'
          });
        }
      }
    }
  },
  components: {
    ElCollapseTransition
  },
};
</script>
<style lang="less" scoped>
.header-container {
  height: 60px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #888; /* 添加底部边框 */
  .r-content{
    display: flex;
    align-items: center;
    .user{
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-left: 10px; /* 可根据实际需要调整标题与图标之间的间距 */
    }
  }
  .view{
    display: flex;
    align-items: center;
  }
  .l-content {
    display: flex;
    align-items: center;
    margin-left: 10px; /* 调整左侧内容的左边距 */
    .icon-wrapper {
      width: 30px; /* 根据实际需要设置宽度 */
      height: 30px; /* 根据实际需要设置高度 */
      background-image: url('../assets/image/标识.png');
      background-size: contain; /* 图像大小适应容器 */
      background-repeat: no-repeat; /* 图像不重复 */
      display: inline-block; /* 设置为内联块级元素 */
    }
    .title{
      font-size: 20px;
      margin-left: 10px; /* 可根据实际需要调整标题与图标之间的间距 */
      display: inline-block; /* 设置为内联块级元素 */
    }
    align-items: center; /* 垂直居中对齐 */
    height: 100%; /* 使得.l-content撑满.header-container的高度 */
  }
}

</style>